<template>
  <div :class="light ? 'header active' : 'header'">
    <img src="" alt="" />
    <div class="lt">
      <i v-if="back" @click="$router.back(-1)" class="iconfont">&#xe618;</i>
    </div>
    <div class="ct" v-if="$slots.default">
      <slot></slot>
    </div>
    <div class="ct" v-else>{{ title }}</div>
    <div class="rt">
      <i v-if="rightIcon" :class="rightIcon" class="iconfont">&#xe638;</i>
    </div>
  </div>
</template>

<script>
// $slots 属性表示当前组件接收到的所有的插槽信息内容
// $slots.default 表示默认插槽信息
export default {
  props: {
    //   标题
    title: {
      type: String,
      default: "xxx标题"
    },
    // 是否返回
    back: {
      type: Boolean,
      default: false
    },
    // 右侧图标class
    rightIcon: {
      type: String,
      default: ""
    },
    // 控制是否为橙色模式
    light: {
      type: Boolean,
      default: false
    }
  }
};
// title属性设置标题
// back属性控制是否有返回键
// light 属性控制是否高亮模式
// right-icon 一旦有右侧就有图标
// 如果Header组件定义了插槽内容，就会覆盖title位置的信息
</script>

<style lang="less" scoped>
.header {
  font-size: 32px;
  background-color: #fff;
  height: 88px;

  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3);
  &.active {
    background-color: #ff4f02;
    box-shadow: none;
    i {
      color: #fff;
    }
    .ct {
      color: #fff;
    }
  }
  display: flex;
  .lt,
  .rt {
    width: 50px;
    height: 50px;
    // border:1px solid black;
  }
  .ct {
    flex: 1;
    text-align: center;
    line-height: 88px;
  }
}
</style>
